<!--
 * @Author: White
 * @description: 歌手页面
 * @LastEditTime: 2021-09-01 11:38:49
-->
<template>
    <!-- 筛选 -->
    <div class="filters">
        <!-- 语种 -->
        <div class="language">
            <div class="title">语种：</div>
            <div class="list">
                <div class="item" v-for="(item, index) in language" :key="index" 
                    :class="[area === item.value && 'active']"
                    @click="goLanguage(item.value)">
                    <span>{{item.label}}</span>
                </div>
            </div>
        </div>
        <!-- 分类 -->
        <div class="type">
            <div class="title">分类：</div>
            <div class="list">
                <div class="item" v-for="(item, index) in types" :key="index"
                :class="[type === item.value && 'active']"
                @click="goType(item.value)">
                    <span>{{item.label}}</span>
                </div>
            </div>
        </div>
        <!-- 字母 -->
        <div class="letter">
            <div class="title">筛选：</div>
            <div class="list">
                <div class="item" v-for="(item, index) in letter" :key="index"
                :class="[initial === item.value && 'active']"
                @click="goLetter(item.value)">
                    <span>{{item.label}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 歌手 -->
    <div class="card-wrapper-loading"
        v-show="loading"
        v-loading="loading"
        element-loading-text="载入中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255)">
    </div>
    <div class="singer" v-show="!loading">
        <div class="singer-item" v-for="(item, index) in singerList" :key="index">
            <div class="singer-img">
                <img :src="item.img1v1Url + '?param=200y200'" alt="">
            </div>
            <p>{{item.name}}</p>
        </div>
    </div>
</template>

<script>
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
import { getSinger } from '@/api/music'
export default defineComponent ({
    setup () {
        const language = [
            { label: "全部", value: "-1" },
            { label: "华语", value: "7" },
            { label: "欧美", value: "96" },
            { label: "日本", value: "8" },
            { label: "韩国", value: "16" },
            { label: "其他", value: "0" }
        ]
        const types = [
            { label: "全部", value: "-1" },
            { label: "男歌手", value: "1" },
            { label: "女歌手", value: "2" },
            { label: "乐队组合", value: "3" }
        ]
        const letter = [
            { label: "热门", value: "-1" },
            { label: "A", value: "a" },
            { label: "B", value: "b" },
            { label: "C", value: "c" },
            { label: "D", value: "d" },
            { label: "E", value: "e" },
            { label: "F", value: "f" },
            { label: "G", value: "g" },
            { label: "H", value: "h" },
            { label: "I", value: "i" },
            { label: "J", value: "j" },
            { label: "K", value: "k" },
            { label: "L", value: "l" },
            { label: "M", value: "m" },
            { label: "N", value: "n" },
            { label: "O", value: "o" },
            { label: "P", value: "p" },
            { label: "Q", value: "q" },
            { label: "R", value: "r" },
            { label: "S", value: "s" },
            { label: "T", value: "t" },
            { label: "U", value: "u" },
            { label: "V", value: "v" },
            { label: "W", value: "w" },
            { label: "X", value: "x" },
            { label: "Y", value: "y" },
            { label: "X", value: "z" },
            { label: "#", value: "0" }
        ]
        const params = reactive({
            type: language[0].value,
            area: types[0].value,
            initial: letter[0].value,
        })
        const data = reactive({
            loading: false,
            singerList: []
        })
        const getData = ( async() => {
            const res = await getSinger(params)
            if (res.data.code === 200) {
                data.singerList = res.data.artists
                data.loading = false
            }
        })
        const goLanguage = ((value) => {
            params.area = value
            getData(params)
            console.log(params)
        })
        const goType = ((value) => {
            params.type = value
            getData(params)
            console.log(value)
        })
        const goLetter = ((value) => {
            params.initial = value
            getData(params)
        })
        onMounted( async() => {
            getData()
        })
       
        return {
            ...toRefs(data),
            ...toRefs(params),
            language,
            types,
            letter,
            getData,
            goLanguage,
            goType,
            goLetter
        }
    }
})
</script>

<style lang="scss" scoped>
.filters {
    .language {
        height: 40px;
        display: flex;
        font-size: 13px;
        .title {
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            color: #666;
            .item {
                width: 75px;
                padding: 0px 10px;
                box-sizing: border-box;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
            }
            .active {
                color: rgb(211, 58, 49);
                background-color: rgb(253, 246, 245);
                border-radius: 10px;
            }
        }
    }
    .type {
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 13px;
        .title {
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            color: #666;
            .item {
                display: inline-block;
                width: 75px;
                padding: 0px 10px;
                box-sizing: border-box;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
            }
            .active {
                color: rgb(211, 58, 49);
                background-color: rgb(253, 246, 245);
                border-radius: 10px;
            }
        }
    }
    .letter {
        height: 20px;
        display: flex;
        font-size: 13px;
        margin-top: 10px;
        .title {
            line-height: 20px;
            color: #000;
            width: 92px;
        }
        .list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            color: #666;
            .item {
                width: 75px;
                box-sizing: border-box;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
            }
            .active {
                color: rgb(211, 58, 49);
                background-color: rgb(253, 246, 245);
                border-radius: 10px;
            }
        }
    }
}
.card-wrapper-loading {
    height: calc(100vh - 420px);
    top: 0px;
    z-index: 9;
    :deep(.el-loading-spinner) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :deep(.el-icon-loading) {
        color: #666;
    }
    :deep(.el-loading-text) {
        margin-left: 2px;
        color: #666;
    }
}
.singer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 80px;
    .singer-item {
        margin-bottom: 30px;
        .singer-img {
            width: 140px;
            height: 140px;
            box-sizing: border-box;
            border: 1px solid #f2f2f2;
            border-radius: 8px;
            margin-bottom: 6px;
            cursor: pointer;
            img {
                border-radius: 8px;
                width: 100%;
            }
        }
        p {
            font-size: 14px;
            color: #333;
            cursor: pointer;
        }
    }
}
</style>
